<template>
  <div class="app-container">
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="35%" v-dialog-drag append-to-body>
      <el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="150px">
        <el-form-item label="托盘、RFID编码" prop="code">
          <el-input v-model="formData.code" placeholder="请输入托盘、RFID编码" style="width: 220px" size="small"/>
          <el-button type="primary" size="small" @click="scan" style="margin-left: 20px;">扫码</el-button>
        </el-form-item>
      </el-form>
      <el-table v-if="pickedList.length > 0" :data="pickedList" :stripe="true" :show-overflow-tooltip="true" style="width: 90%;margin: 0 auto;">
        <el-table-column label="箱码" align="center" prop="materialBoxCode"/>
        <el-table-column label="产品码" align="center" prop="materialCode"/>
        <el-table-column label="数量" align="center" prop="count"/>
        <el-table-column label="状态" align="center" prop="pickStatus">
          <template v-slot="scope">
            <span v-if="scope.row.pickStatus === 0">未拾取</span>
            <span v-if="scope.row.pickStatus === 1">拾取</span>
            <span v-if="scope.row.pickStatus === 2">在库</span>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="openPickDialog" size="small">扫码</el-button>
        <el-button type="primary" @click="submitForm" size="small">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="pickDialogTitle" :visible.sync="pickDialogVisible" width="35%" v-dialog-drag append-to-body>
      <el-form ref="pickFormRef" :model="pickFormData" label-width="150px">
        <el-form-item label="扫描编码" prop="code">
          <el-input v-model="pickFormData.code" placeholder="请输入拣货物料、物料箱" style="width: 200px" size="small"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitPickDialog" size="small">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {getMaterialOrBox, getPickedList, getTrayRfidInfo, create, merge} from "@/api/hs/scan";

export default {
  name: "PickMergeForm",
  data() {
    return {
      // 弹出层标题
      dialogTitle: "",
      // 是否显示弹出层
      dialogVisible: false,
      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
      formLoading: false,
      // 表单参数
      formData: {
        code: undefined
      },
      // 表单校验
      formRules: {
        code: [{required: true, message: '托盘不能为空', trigger: 'blur'}],
      },
      pickTaskId: undefined,
      materialOrBoxList: [],
      pickedList: [],

      pickDialogTitle: "",
      pickDialogVisible: false,
      pickFormData: {},
      pickCodeList: [],

    }
  },
  methods: {
    /** 打开弹窗 */
    async open(pickTaskId) {
      this.reset();
      this.pickTaskId = pickTaskId;
      this.dialogVisible = true;
      this.dialogTitle = "合拖";
    },
    // 扫码添加
    async scan() {
      this.pickedList = [];
      await this.$refs["formRef"].validate();
      this.formLoading = true;
      const res = await getTrayRfidInfo(this.formData.code)
      this.formLoading = false;
      if (res.code === 0) {
        if (res.data === null) {
          this.$confirm("该托盘是一个新建托盘是否确认新建？", "提示", {
            confirmButtonText: "是",
            cancelButtonText: "否"
          })
            .then(() => {
              create(this.formData.code).then(res => {
                if (res.code === 0) {
                  this.$message.success("托盘创建成功");
                }
              })
            })
            .catch(() => {

            });
        } else {
          const materialOrBoxRes = await getMaterialOrBox(this.pickTaskId, this.formData.code);
          if (materialOrBoxRes.code === 0) {
            this.materialOrBoxList = materialOrBoxRes.data;
          }
        }
        await this.getPickList(this.pickTaskId);
      }
    },
    getPickList(pickTaskId) {
      this.pickedList.push(...this.materialOrBoxList);
      this.formLoading = true;
      getPickedList(pickTaskId).then(res => {
        if (res.code === 0) {
          this.pickedList.push(...res.data);
          console.log(this.pickedList)
        }
      }).finally(() => {
        this.formLoading = false;
      });
    },
    reset() {
      this.pickTaskId = undefined;
      this.formData = {};
      this.materialOrBoxList = [];
      this.pickedList = [];
    },
    openPickDialog() {
      this.resetPickFormData();
      this.pickDialogVisible = true;
      this.pickDialogTitle = "扫码";
    },
    // 扫码拣货确定
    submitPickDialog() {
      this.pickedList.forEach(item => {
        if (item.infoCode === this.pickFormData.code) {
          item.pickStatus = 1;
          this.pickCodeList.push(item.infoCode);
        }
      })
      this.pickDialogVisible = false;
    },
    resetPickFormData() {
      this.pickFormData = {};
    },
    // 确定, 扫码拣货完成
    async submitForm() {
      const data = {
        pickTaskId: this.pickTaskId,
        code: this.formData.code,
        pickCodeList: this.pickCodeList
      }
      const res = await merge(data);
      if (res.code === 0) {
        this.$message.success("合托成功")
        this.dialogVisible = false;
        this.$emit("success", this.pickTaskId);
      }
    },
  }
}
</script>
